<template>
	<view>
		<view class="box">
			<view class="shou">
				<view class="shou-box">
					<image src="../../static/sou.png" mode=""></image>
					<input type="text" @input="sou" placeholder="请输入搜索">
				</view>
			</view>

			<view class="wu" v-if="bank_lists_data.data.data.length==0">
				<image src="../../static/wu.png" style="width: 182px; height: 150px; " mode=""></image>
				<p>暂无数据</p>
				<button @click="onAddBank" style="width: 260rpx;font-size: 28rpx;">
					添加银行卡</button>
			</view>

			<view class="kks" v-for="(time,index) in bank_lists_data.data.data"
				:style="time.is_default==1?'box-shadow: 0px 0px 6px 0.1px #1890FF;':''">
				<view class="jjs" @click="xuanzhe(time,index)">
					<view>
						<view>
							<image src="../../static/yhk.png" mode=""></image>
							<text class="d">{{time.bank_name}}</text>
						</view>
						<view>
							<text class="d">{{time.username}}</text>
						</view>
					</view>
					<view>
						<view>
							<text class="a" @click.stop="tzxx(JSON.stringify(time))">编辑</text>
							<text class="b" @click.stop="bank_del(time.id)">删除</text>
						</view>
						<view>
							<text>{{time.bank_code}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- <button @click="tzxx()" v-if="bank_lists_data.data.data.length!=0">确定</button> -->

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bank_lists_data: [],
				indexs: 0, //选择银行卡
				// 申请表id
				shenQingBiaoID: "",
				bond_amount: "", //保证金金额
				name: ""
			}
		},
		onShow() {
			this.bank_lists('');
		},
		onLoad(open) {
			// if (open.name) {
			// 	this.name = open.name;
			// }
			// this.shenQingBiaoID = open.id;
			// this.bond_amount = open.bond_amount;
		},
		methods: {

			// 添加账户/银行卡 
			onAddBank() {
				uni.navigateTo({
					url: '/pages/my/a_zhaunghuguanli'
				})
			},

			//选择银行卡
			xuanzhe(item, indexs) {
				// for (let i = 0; i < this.bank_lists_data.data.data.length; i++) {
				// 	this.bank_lists_data.data.data[i].is_default = 0;
				// }
				// this.bank_lists_data.data.data[indexs].is_default = 1;
				// this.indexs = this.bank_lists_data.data.data[indexs];
				console.log('选择的银行对象 = ', item);
				uni.$emit('onSelBankCard', { bank: item })
				uni.navigateBack()
			},

			//删除银行卡
			bank_del(x) {
				uni.showModal({
					title: '温馨提示', //提示标题
					content: '确认删除', //提示内容
					showCancel: true, //是否显示取消按钮
					success: (res) => {
						if (res.confirm) {
							let data = { id: x }
							this.$rqt.bank_del(data).then(res => {
								console.log(res);
								uni.showToast({ title: res.msg, icon: "success" })
								this.bank_lists('');
							})
						} else if (res.cancel) {}
					}
				})
			},
			//搜索
			sou(x) {
				//x.detail.value //输入值
				this.bank_lists(x.detail.value);
			},
			tzxx() {
				this.indexs.id2 = this.shenQingBiaoID;
				this.indexs = JSON.stringify(this.indexs);
				uni.navigateTo({
					url: "/pages/bond/a_tuihuanbaozhnegjin?data=" + this.indexs + "&bond_amount=" + this
						.bond_amount + "&name=" + this.name
				});
			},
			//银行列表
			bank_lists(x) {
				let data = { serchname: x }
				this.$rqt.bank_lists(data).then(res => {
					console.log(res);
					this.bank_lists_data = res
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F7F7F7;
	}
</style>
<style scoped>
	.wu {
		width: 100%;
		text-align: center;
		padding-top: 60px;
		color: #999999;
		font-size: 18px;
		line-height: 40px;
	}

	.box>button {
		color: #fff;
		font-size: 18px;
		width: 90%;
		margin: 0 auto;
		height: 50px;
		font-weight: 600;
		background: #1890FF;
		box-shadow: 0px 0px 4px 0px rgba(204, 204, 204, 0.5);
		border-radius: 25px;
		margin-top: 20px;
	}

	.a {
		margin-left: 70px;
		font-size: 18px;
		color: #1890FF;
		font-weight: 400;
		float: right;
	}

	.b {
		margin-left: 20px;
		font-size: 18px;
		font-weight: 400;
		color: #FF0000;
	}

	.d {
		font-size: 18px;
		font-weight: 500;
	}

	.kks {
		border-radius: 5px;
		margin: 0 auto;
		margin-top: 10px;
		width: 95%;
		height: 104px;
		box-shadow: 0px 0px 4px 0px rgba(204, 204, 204, 0.5);
		overflow: hidden;
		background: #FFFFFF;
	}

	.jjs {
		width: 95%;
		margin: 0 auto;
	}

	.jjs>view {
		width: 50%;
		float: left;
	}

	.jjs>view>view {
		display: flex;
		align-items: center;
		line-height: 50px;
		text-align: right;
	}

	.jjs>view>view>image {
		width: 28px;
		height: 21px;
		margin-right: 10px;
	}

	.box {
		width: 100%;
		padding-bottom: 20px;
	}

	.shou {
		width: 100%;
		height: 60px;
		background: #1890FF;
		display: flex;
		align-items: center;
	}

	.shou-box {
		width: 355px;
		margin: 0 auto;
		height: 32px;
		background: #FAFAFA;
		border-radius: 40px;
		display: flex;
		align-items: center;
	}

	.shou-box>image {
		width: 15px;
		height: 15px;
		margin-left: 10px;
		margin-right: 10px;
	}
</style>